<div class="row">
  <div class="col-3">
    <cmdb-user-image [imageURL]="userInstance?.image"></cmdb-user-image>
      <ul id="profile-meta-data" class="mt-3 list-group">
        <li class="list-group-item text-muted">Framework</li>
        <li class="list-group-item text-right"><span class="pull-left"><strong>Objects</strong></span> 0</li>
        <li class="list-group-item text-right"><span class="pull-left"><strong>Types</strong></span> 0</li>
        <li class="list-group-item text-right"><span class="pull-left"><strong>Edits</strong></span> 0</li>
      </ul>
  </div>
  <div class="col-9">
    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="profile-tab" data-toggle="tab" href="#nav-profile"
           role="tab">Profile</a>
        <a class="nav-item nav-link" id="meta-tab" data-toggle="tab" href="#nav-meta" role="tab">Meta</a>
        <a class="nav-item nav-link" id="group-tab" data-toggle="tab" href="#nav-group" role="tab">Group</a>
        <a class="nav-item nav-link bg-primary text-white" id="pass-change-tab" data-toggle="tab" href="#nav-change"
           role="tab">Change Password?</a>
      </div>
    </nav>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="nav-profile" role="tabpanel">
        <form [formGroup]="profileForm" class="mt-3">
          <div class="form-row">
            <div class="col-md-6 form-group">
              <label>Username</label>
              <input type="text" class="form-control" value="{{userInstance?.user_name}}">
            </div>
            <div class="col-md-6 form-group">
              <label>E-Mail</label>
              <input type="text" class="form-control" value="{{userInstance?.email}}">
            </div>
            <div class="col-md-6 form-group">
              <label>Firstname</label>
              <input type="text" class="form-control" value="{{userInstance?.first_name}}">
            </div>
            <div class="col-md-6 form-group">
              <label>Lastname</label>
              <input type="text" class="form-control" value="{{userInstance?.last_name}}">
            </div>
          </div>
        </form>
      </div>
      <div class="tab-pane fade" id="nav-meta" role="tabpanel">
        <dl class="mt-3 row">
          <dt class="col-3">Public ID:</dt>
          <dd class="col-9">{{userInstance?.public_id}}</dd>
          <dt class="col-3">Registration Time:</dt>
          <dd class="col-9">{{userInstance?.registration_time.$date | date:"dd/MM/yyyy - HH:mm:ss"}}</dd>
          <dt class="col-3">Authenticator</dt>
          <dd class="col-9">{{userInstance?.authenticator}}</dd>
        </dl>
      </div>
      <div class="tab-pane fade" id="nav-group" role="tabpanel">
        <dl class="mt-3 row">
          <dt class="col-sm-3">Group:</dt>
          <dd class="col-sm-9">{{userGroup?.label}}</dd>
        </dl>
        <table class="table table-striped">
          <tbody>
          <tr *ngFor="let right of userGroup?.rights">
            <th scope="row">{{right}}</th>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="tab-pane fade" id="nav-change" role="tabpanel">
        <div class="row mt-3">
          <div class="col">
            <form [formGroup]="passwordChangeForm" id="passwordChangeForm" (ngSubmit)="onPasswordChange()">
              <div class="input-group">
                <input type="password" class="form-control" formControlName="password" id="userPasswordChange"
                       placeholder="New Password">
                <div class="input-group-append">
                  <button type="submit" class="btn btn-outline-primary">Save</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
